<template>
  <view class="container">
    <text class="title">AI Talk</text>
    <scroll-view scroll-y="true" class="dialog">
      <view class="message" v-for="(message, index) in messages" :key="index">
        <text class="message-header" :style="{ color: message.sender === 'user' ? '#2c3e50' : '#fff' }">
          {{ message.sender === 'user' ? 'You:' : 'AI:' }}
        </text>
        <text class="message-body" :style="{ backgroundColor: message.sender === 'user' ? '#ecf0f1' : '#2ecc71', color: message.sender === 'user' ? '#2c3e50' : '#fff' }">
          {{ message.text }}
        </text>
      </view>
    </scroll-view>
    <input v-model="question" placeholder="Ask a question..." @keyup.enter="sendQuestion" class="input" />
    <button @click="sendQuestion" class="button">Send</button>
  </view>
</template>

<script>
import {send} from "@/api/ai/ai";

export default {
  data() {
    return {
      question: '',
      messages: []   // 存储AI的响应
    };
  },
  methods: {
    sendQuestion() {
      if (this.question.trim() === '') {
        alert('Please enter a question.');
        return;
      }
      send(this.question).then(response => {
        const aiResponse = response.replace(/^data:/, '');
        console.log(aiResponse)
        this.messages.push({ text: this.question, sender: 'user' });
        this.messages.push({ text: aiResponse, sender: 'ai' });
        this.question = '';
      }).catch(error => {
        console.error('Error sending question:', error);
        alert('Failed to send question. Please try again later.');
      });
    },
  },
};
</script>

<style scoped>
.container {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding-top: 60rpx; /* 使用rpx以支持不同屏幕尺寸 */
  background-color: #f5f5f5; /* 添加背景色 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dialog {
  width: 90%; /* 调整宽度以更好地适应屏幕 */
  margin: 0 auto;
  padding: 0 20rpx; /* 增加内边距 */
  max-width: 600rpx; /* 限制最大宽度，以适应大屏设备 */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 对话从左边开始 */
}

.user-message, .ai-message {
  margin: 20rpx 0;
  padding: 20rpx;
  border-radius: 15rpx; /* 增加圆角 */
  box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1); /* 加深阴影 */
  transition: all 0.3s ease; /* 添加过渡效果 */
  max-width: 100%; /* 确保消息不会超出屏幕宽度 */
}

.user-message {
  background-color: #ecf0f1;
  align-self: flex-start; /* 用户消息从左边对齐 */
}

.ai-message {
  background-color: #2ecc71; /* 更换为更鲜艳的颜色 */
  color: white;
  align-self: flex-end; /* AI消息从右边对齐 */
}

.message-header {
  font-weight: bold;
  margin-bottom: 10rpx;
  font-size: 36rpx; /* 增加字体大小 */
}

.message-body {
  font-size: 32rpx; /* 增加字体大小 */
  word-wrap: break-word; /* 防止长单词溢出 */
}

.input {
  padding: 20rpx;
  font-size: 36rpx; /* 增加字体大小 */
  margin-top: 40rpx;
  width: 100%; /* 调整宽度以匹配容器宽度 */
  border: 1rpx solid #ccc; /* 添加边框 */
  border-radius: 15rpx; /* 增加圆角 */
  box-sizing: border-box; /* 确保宽度包括内边距和边框 */
  min-height: 80rpx; /* 设置最小高度以确保文字显示全面 */
}

.input:focus {
  outline: none; /* 移除聚焦时的轮廓线 */
  box-shadow: 0 0 0 2rpx rgba(44, 62, 80, 0.5); /* 添加聚焦阴影 */
}

.button {
  padding: 20rpx 40rpx;
  font-size: 36rpx; /* 增加字体大小 */
  margin-top: 20rpx;
  background-color: #3498db; /* 更换按钮颜色 */
  color: white;
  border: none; /* 移除边框 */
  border-radius: 15rpx; /* 增加圆角 */
  cursor: pointer; /* 添加鼠标指针样式 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
  margin-bottom: 40rpx; /* 添加底部间距，确保布局美观 */
}

.button:hover {
  background-color: #2980b9; /* 悬停时改变颜色 */
}
</style>
